<template>
	<view>
		<view class="container">
			<view class="container-head-img">
				<image src="../../static/img/backgroudindex.png" mode=""></image>
				<!-- 搜索 -->
				<view class="example-body">
					<uni-nav-bar :fixed="false"  color="#ffffff" :background-color="titleBg" right-icon="scan"
						@clickLeft="showCity" @clickRight="scan">
						<block slot="left">
							<view class="city">
								<view><text class="uni-nav-bar-text">{{ city }}</text></view>
								<uni-icons type="arrowdown" color="#ffffff" size="22" />
							</view>
						</block>
						<view class="input-view" @click="confirm()">
							<uni-icons class="input-uni-icon" type="search" size="22" color="#0055ff" />
							<input confirm-type="search" color="#080808" class="nav-bar-input" type="text" placeholder="输入搜索关键词" >
						</view>
					</uni-nav-bar>
				</view>
				<view class="container-main">
					<view class="selected">
						<view class="selected-div">
							<view class="icon">
								<image src="../../static/img/攻略.png" mode=""></image>
							</view>
							<text>攻略.景点</text>
						</view>
						<view class="selected-div">
							<view class="icon">
								<image src="../../static/img/门票.png" mode=""></image>
							</view>
							<text>门票.玩乐</text>
						</view>
						<view class="selected-div">
							<view class="icon">
								<image src="../../static/img/美食.png" mode=""></image>
							</view>
							<text style="margin-left: 25rpx;">美食林</text>
						</view>
						<view class="selected-div">
							<view class="icon">
								<image src="../../static/img/周边游.png" mode=""></image>
							</view>
							<text style="margin-left: 25rpx;">周边游</text>
						</view>
						<view class="selected-div">
							<view class="icon">
								<image src="../../static/img/生鲜水果.png" mode=""></image>
							</view>
							<text>畜牧种植</text>
						</view>
					</view>
					<!--  -->
					<view class="selected-one">
						<view class="one-div" style="background-color: #FA6256;width: 170rpx;">
							<view class="icon">
							</view>
							<text>酒店</text>
						</view>
						<view class="one-div" style="background-color: #FA7253;width: 120rpx;">
							<view class="icon">
							</view>
							<text>民宿.客栈</text>
						</view>
						<view class="one-div" style="background-color: #FFBE4A;width: 229rpx;">
							<view class="icon">
							</view>
							<text>畜牧养殖</text>
						</view>
						<view class="one-div" style="background-color: #3AC4A2;width: 170rpx;">
							<view class="icon">
							</view>
							<text style="margin-left: 25rpx;">旅游</text>
						</view>
						<view class="one-div" style="background-color: #4DCB84;width: 120rpx;">

							<text>美食</text>
						</view>
						<view class="one-div" style="background-color: #59CF71;width: 90rpx;">
							<text>周边游</text>
						</view>
						<view class="one-div" style="background-color: #66D262;width: 94rpx;">
							<text>景点</text>
						</view>
					</view>
					<view class="selected-one">
						<image src="../../static/img/ad.png" mode="" style="width: 650rpx;height: 200rpx;"></image>
					</view>
					<view class="culture">
						<view class="head">
							<text>羌文化浓厚</text>
						</view>
						<view class="culture-main">
						<view class="culture-left" style="background-color: #FF7F62;">
							<text>畜</text>
							<view class="culture-footer" style="background-color: #FFFFFF;">
								<image src="../../static/img/bg.png" mode=""></image>
								<text>饲养</text>
								<text style="color:#FC7905 ;">$150</text>
							</view>
						</view>
						<view class="culture-right" style="background-color: #2BC5C6;">
							<text>农</text>
							<view class="culture-footer">
								<view class="culture-card">
									<text>畜牧</text>
									<!-- <text style="color:#FC7905 ;">$570</text> -->
								</view>
								<view class="culture-card">
									<text>农林</text>
									<!-- <text style="color:#FC7905 ;">$450</text> -->
								</view>
							</view>
							
						</view>
					</view>
						<view v-for="(item,index) in newList" :key="index">{{item}}</view>

					</view>
				</view>
			</view>

		</view>

	</view>
</template>
<script
	src="https://at.alicdn.com/t/font_2722851_qulz09z3the.js?spm=a313x.7781069.1998910419.116&file=font_2722851_qulz09z3the.js">
</script>
<script>
	var page = 1,
		timer = null;
	export default {
		components: {},
		data() {
			return {
				city: '北京', //选择城市
				titleBg: 'rgba(255,255,255,0)', //绑定导航条背景颜色
				newList: [] //遍历菜单
			}
		},
		onLoad() {
			this.getList() //第一次加载数据
		},
		onPUllDownRefresh() { //触发上拉刷新函数
			if (timer != null) { //为防止回弹多次触发刷新
				clearTimeout(timer)
			}
			timer = setTimeout(() => {
				this.getList()
			}, 500)
		},
		onReachBottom() { //监听页面触底函数
			if (timer != null) { //为防止回弹多次触发刷新
				clearTimeout(timer)
			}
			timer = setTimeout(() => {
				getMoreList()
			}, 500)

		},
		methods: {
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			showMenu() {
				uni.showToast({
					title: '菜单'
				})
			},
			clickLeft() {

				uni.showToast({
					title: '左侧按钮'
				})
			},
			search() {
				uni.showToast({
					title: '搜索'
				})
			},
			showCity() {
				uni.showToast({
					title: '选择城市'
				})
			},
			scan() {
				uni.showToast({
					title: '扫码'
				})
			},
			confirm() {
				uni.navigateTo({
				    url: '../search/search'   
				});
			},
			getMoreList() {
				uni.showNavigationBarLoading(); //导航栏显示加载动画
				uni.request({
					url: 'https://demo.hcoder.net/index.php?user=hcoder&pwd=hcoder&m=list1&page=' + page,
					method: 'GET',
					success: res => {
						console.log(res)
						uni.hideNavigationBarLoading(); //导航栏停止加载动画
						if (res.data = null) {
							return false
						}
						this.newList = this.newList.concat(res.data) //拼接数组
						uni.stopPUllDownRefresh(); //停止刷新
						page++
					}

				})
			},
			//下拉刷新
			getList() {
				page = 1
				uni.showNavigationBarLoading(); //显示加载动画
				uni.request({
					url: 'https://demo.hcoder.net/index.php?user=hcoder&pwd=hcoder&m=list1&page=' + page,
					method: 'GET',
					success: res => {
						console.log(res)
						this.newList = res.data
						uni.hideNavigationBarLoading(); //停止加载动画
						uni.stopPUllDownRefresh(); //停止刷新
						page++
					}

				})
			}
		},
		onPullDownRefresh() {
			console.log('onPullDownRefresh')
			setTimeout(function() {
				uni.stopPullDownRefresh()
				console.log('stopPullDownRefresh')
			}, 1000)
		}
	}
</script>

<style scoped>
	@charset "UTF-8";

	/* 头条小程序组件内不能引入字体 */
	/* #ifdef MP-TOUTIAO */
	@font-face {
		font-family: uniicons;
		font-weight: normal;
		font-style: normal;
		src: url("~@/static/uni.ttf") format("truetype");
	}

	/* #endif */
	/* #ifndef APP-NVUE */
	page {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		background-color: #efeff4;
		min-height: 100%;
		height: auto;
	}

	view {
		font-size: 14px;
		line-height: inherit;
	}

	.container {
		position: relative;
		width: 100%;

	}

	.container-head-img {
		width: 100%;
		height: 360rpx;

	}

	.container-head-img /deep/ image {
		width: 100%;
		height: 360rpx;
		position: absolute;
		border-bottom-left-radius: 70rpx;
		border-bottom-right-radius: 70rpx;
		z-index: 0;
	}

	.example-body /deep/ .uni-navbar--border {
		border-bottom-color: rgba(255, 255, 255, 0)
	}

	.example {}

	.example-info {
		padding: 15px;
		color: #3b4144;
		background: rgba(255, 255, 255, 0);
	}

	.example-body {
		position: absolute;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		/* padding: 0; */
		font-size: 14px;
		/* background-color: #007AFF 0.1; */
		margin-top: 60rpx;
	}

	/* #endif */
	.example {
		/* padding: 0 15px; */
	}

	.example-info {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		padding: 15px;
		color: #3b4144;
		font-size: 14px;
		line-height: 20px;
	}

	.example-info-text {
		font-size: 14px;
		line-height: 20px;
		color: #3b4144;
	}

	.example-body {
		flex-direction: column;
		/* padding: 15px; */
	}

	.word-btn-white {
		font-size: 18px;
	}




	.city {
		/* #ifndef APP-PLUS-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		margin-left: 4px;
	}

	.input-view {
		display: flex;
		flex-direction: row;
		flex: 1;
		background-color: #f8f8f8;
		height: 30px;
		border-radius: 15px;
		padding: 0 15px;
		flex-wrap: nowrap;
		margin: 7px 0;
		line-height: 30px;
	}

	.input-uni-icon {
		line-height: 30px;
	}

	.nav-bar-input {
		height: 30px;
		line-height: 30px;
		/* #ifdef APP-PLUS-NVUE */
		width: 370rpx;
		/* #endif */
		padding: 0 5px;
		font-size: 14px;
	}

	.example-body {
		display: block;
		padding: 0;
	}

	.container-main {
		width: 100%;
		min-height: 400rpx;
		position: absolute;
		z-index: 10001;
		padding: 50rpx;
		margin-top: 220rpx;
	}

	.container-main image {
		border-radius: 0;
	}

	.selected {
		padding: 30rpx 20rpx;
		width: 610rpx;
		height: 100rpx;
		background-color: #FFFFFF;
		border-radius: 10px;
		display: flex;
		margin-bottom: 20rpx;
	}

	.selected-one {
		width: 650rpx;
		min-height: 200rpx;
		background-color: #FFFFFF;
		border-radius: 10px;
		margin-bottom: 20rpx;
		color: #FFFFFF;
		/*  */
		padding: 0;
		display: flex;
		align-items: center;
		place-content: space-between center;
		flex-flow: row wrap;
		overflow: hidden;
	}

	.culture {
		width: 650rpx;
		min-height: 300rpx;
		background-color: #FFFFFF;
		margin-bottom: 20rpx;
		font-weight: 550;
		border-radius: 20rpx;
		overflow: hidden;
	}

	.head {
		padding: 20rpx;
		height: 20%;
	}

	.culture-main {
		display: flex;
		overflow: hidden;
	}

	.culture-left,
	.culture-right {
		width: 50%;
		height: 200rpx;
		padding: 20rpx;
	}

	.one-div {
		padding: 30rpx 20rpx;
		height: 18%;
		width: ;
		text-align: center;
		line-height: 40rpx;
		border: 1px solid white;
	}

	.selected /deep/ .uni-grid {
		position: absolute;
		width: 100%;
	}

	.selected-div {
		width: 20%;
		height: 100%;
	}

	.selected-div text {
		position: absolute;
		margin-top: 76rpx;
		text-align: center;
		margin-left: 14rpx;
		font-size: 10px;
	}

	.icon image {
		width: 70rpx;
		height: 70rpx;
		vertical-align: -0.15em;
		fill: currentColor;
		overflow: hidden;
		margin: 0 auto;
		margin-left: 30rpx;
		text-align: center;
		display: block;
	}
	.culture-footer{
		position: relative;
		width:100%;
		height: 80%;
		overflow: hidden;
		
	}
	.culture-footer text{
		margin-left: 10rpx;
		line-height: 70rpx;

		}
	.culture-footer image{
		position: relative;
		width:100%;
		height: 50%;
		display: block;
	}
	.culture-card{
		height: 48%;
		background-color: #FFFFFF;
		margin-bottom: 10rpx;
	}
</style>
